//地址列表展示
<template>
  <div>
    <div class="user-header">
      <span class="iconfont text" @click="back">&#xe601;</span>
      <span class="text2">地址管理</span>
      <span class="iconfont text">&#xe62b;</span>
    </div>
    <van-address-list
      v-model="chosenAddressId"
      :list="list"
      disabled-text="以下地址超出配送范围"
      default-tag-text="默认"
      @add="onAdd"
      @edit="onEdit"
    />
  </div>
</template>

<script>
import { Toast } from 'vant'
import { getAddressList } from '@/api/api'
import Pubsub from 'pubsub-js'
export default {
  data () {
    return {
      chosenAddressId: '1',
      list: [],
      type: ''
    }
  },
  beforeCreate () {
    getAddressList().then((res) => {
      console.log(res)
      this.list = (res.data.data || []).map((item) => {
        return {
          id: item.addressId,
          name: item.userName,
          tel: item.userPhone,
          address: `${item.provinceName} ${item.regionName} ${item.regionName}`,
          isDefault: !!item.defaultFlag
        }
      })
    })
  },
  methods: {
    // 返回上一级
    back () {
      this.$router.push('/Me')
    },
    onAdd () {
      Toast('新增地址')
      let obj = {
        path: '/Edit',
        query: {
          type: 1
        }
      }
      this.$router.push(obj)
    },
    onEdit (item, index) {
      console.log(item, index, '========')
      Pubsub.publish('item', item)
      this.$router.push('/Edit')
      this.type = 'edit'
    }
  }
}
</script>
<style lang="less" scoped>
.user-header {
  width: 100%;
  height: 1rem;
  border-bottom: 1px solid #f7f8f8;
  line-height: 1.2rem;
  display: flex;
  text-align: center;
  .text {
    width: 10%;
  }
  .text2 {
    width: 80%;
  }
}
</style>
